<script setup lang="ts">
import useForm from '@/hooks/useForm'
import type { FormRules } from 'element-plus'
import { getDeptSelect, add, update } from '@/api/system/dept'

/**
 * 表单规则
 */
const rules = reactive<FormRules>({
  username: [{ required: true, message: '必填项！', trigger: 'blur' }],
  password: [{ required: true, message: '必填项！', trigger: 'blur' }]
})

const emit = defineEmits(['refresh'])

const initData = { status: true, sort: 1 }

const {
  formRef,
  visible,
  loading,
  title,
  formData,
  deptsOptions,
  open,
  close,
  submitForm,
} = useForm<SysDeptType>({ add, update, getDeptSelect, initData }, emit);

// 导出父组件调用
defineExpose({
  open,
})

</script>

<template>
  <el-dialog :title="title + '部门'" v-model="visible" @close="close" draggable>
    <el-scrollbar max-height="460px">
      <el-form ref="formRef" :rules="rules" :model="formData" :label-width="100" label-position="right" status-icon>
        <el-row>
          <el-col :span="12">
            <el-form-item label="上级部门" prop="pid">
              <el-tree-select :disabled="formData.pid === 0 ? true : false" v-model="formData.pid" :data="deptsOptions"
                filterable :render-after-expand="false" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入部门名称" maxlength="20" clearable show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门全称" prop="fullName">
              <el-input v-model="formData.fullName" placeholder="请输入部门全称" maxlength="20" clearable show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="formData.sort" :min="1" :max="10000" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="formData.remarks" type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入备注信息"
            maxlength="500" clearable show-word-limit />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <div class="flex items-center justify-center">
        <el-button class="w-29" type="info" @click="close">取 消</el-button>
        <el-button class="w-29" type="primary" :loading="loading" @click="submitForm()">
          {{ loading ? '正在提交 ...' : '提 交' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>